import React, { useState } from 'react';
import { Card } from 'songsui';

const Elevation: React.FC = () => {
  const [elevation, setElevation] = useState(1);
  return (
    <Card style={{ width: '100%' }}>
      <div>
        <div style={{ width: '70%', float: 'left' }}>
          <Card elevation={elevation}>
            this is card, my component is first !
          </Card>
        </div>
        <div style={{ width: '30%', float: 'left' }}>
          <span>elevation</span>
          <span onClick={() => elevation !== 0 && setElevation(elevation - 1)}>
            -
          </span>
          {elevation}
          <span onClick={() => elevation <= 4 && setElevation(elevation + 1)}>
            +
          </span>
        </div>
      </div>
    </Card>
  );
};
export default Elevation;
